<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成绩统计</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-touch-fullscreen" content="yes">
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/xs-chengjitongji.css">
    <script src="common/jquery-1.10.2.min.js"></script>
    <script src="common/common.js"></script>
    <script src="common/echarts.common.min.js"></script>
</head>
<body>
<div class="chengji-box">
    <div class="chengji-box-el">
        <ul>
            <li class="time">时间区间</li>
            <li class="time-el">
                <span>2018-10-02~2018-10-10</span>
                <img class="time-img"  src="img/arrow.png" alt="">
            </li>
        </ul>
    </div>
    <div class="chengji-box-el-t">
        <ul>
            <li class="chengji-box-el-li" style="border-right: 1px solid #eeeeee">
                <em></em>
                素描
            </li>
            <li class="chengji-box-el-li"  style="border-right: 1px solid #eeeeee">
                <em></em>
                色彩
            </li>
            <li class="chengji-box-el-li" >
                <em></em>
                速写
            </li>
        </ul>
    </div>
    <div class="chengji-box-title">
        <div class="chengji-box-title-one">
            三科成绩曲线变化
        </div>
        <div class="chengji-box-title-two">
            <span class="chengji-box-em-1"></span><span>素描</span>
            <span class="chengji-box-em-2"></span><span>色彩</span>
            <span class="chengji-box-em-3"></span><span>速写</span>
        </div>
    </div>
    <div class="chengji-content"  id="main"></div>
    <div class="chengji-box-el-jilu">
        查看历史记录
    </div>

</div>
<script type="text/javascript">
    $('.chengji-box-el-li').eq(0).find('em').addClass('sele_cur')
    $(function(){
        $('body').on('click','.chengji-box-el-li',function(){
            $(this).find('em').addClass('sele_cur').parents('li').siblings().find('em').removeClass('sele_cur');
        })

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:[]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            // toolbox: {
            //     feature: {
            //         saveAsImage: {}
            //     }
            // },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['10-02','10-03','10-04','10-05']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'邮件营销',
                    type:'line',
                    stack: '总量',
                    data:[120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name:'联盟广告',
                    type:'line',
                    stack: '总量',
                    data:[220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name:'视频广告',
                    type:'line',
                    stack: '总量',
                    data:[150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name:'直接访问',
                    type:'line',
                    stack: '总量',
                    data:[320, 332, 301, 334, 390, 330, 320]
                },

            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    })
</script>
</body>
</html>
